/**
 * guanf
 * 2022-11-01
 * 获取用户列表
 */
import React from 'react'; // eslint-disable-line no-unused-vars
import {useLocation, Link, useNavigate} from 'react-router-dom'
import axios from 'axios'

import '../css/UserList.css'

function UserList() {
    const navigate = useNavigate();
    let location =useLocation();

    //创建修改操作
    const update = (id) => {
        //编写头文件
        let config = {headers:{'Content-Type':'multipart-/form-data'},withCredentials:true}
        //请求后台
         axios({
             method:'GET',
             url:'http://localhost/mall-basic-service/basic/user/queryUserByUserId/'+id,
           },config).then((response)=>{
            //处理回调函数
            navigate('/updateUser',{
                state:{ nickname : response.data}
            })
         }).catch(function(error){
             //处理异常数据
         })
    }

    //创建删除操作
    const del = (id) =>{
        //编写头文件
        let config = {headers:{'Content-Type':'multipart-/form-data'},withCredentials:true}
        //请求后台
        axios({
            method:'delete',
            url:'http://localhost/mall-basic-service/basic/user/deleteUserLayUi/'+id,
        },config).then(()=>{
            //回调函数
            //处理回调函数
            //请求通过axios请求后台
            axios({
                method: 'get',
                url:'http://localhost/mall-basic-service/basic/user/queryBasicUserLayUiPage',
                params:{
                    page : 1,
                    limit : 10
                }
            },config).then((response)=>{

                //处理回调函数
                navigate('/userList',{
                    state:{ nickname :response.data.data}
                })
            }).catch(function(error){
                //处理异常数据
            })
        }).catch(function(error){
            //处理异常
        })

    }
    let json = eval(JSON.stringify(location.state.nickname))

    return (
        <div className="bodyDiv">
            <div>
                <Link className="btn btn-primary" to="/addUser">新增</Link>
            </div>
            <div className="listDiv">
                {json.map((item,index)=>{
                  item.createtime = undefined
                  return (
                        <ul key ={index}>
                            <li ><i className="glyphicon glyphicon-barcode"></i>用户id：{item.userid}</li>
                            <li ><i className="glyphicon glyphicon-user"></i>登录帐号：{item.username}</li>
                            <li ><i className="glyphicon glyphicon-envelope"></i>登录名称：{item.nickname}</li>
                            <li ><i className="glyphico32c 1qsd n glyphicon-calendar"></i>申请日期：{item.createtime}</li>
                            <li >用户类型：{item.state} </li>
                            <li >用户状态：{item.type}</li>
                            <li ><i className="glyphicon glyphicon-phone"></i>电话号码：{item.phone}</li>
                            <li >操作：<button onClick={del.bind(this,item.userid)}>删除</button>｜<button onClick={update.bind(this,item.userid)}>修改</button></li>
                        </ul>
                    )
                })}
            </div>
        </div>
    );
}

export default UserList;